<template>
  <view class="custom-navbar" :style="navbarStyle">
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="navbar-content" :style="{ height: navbarHeight + 'px' }">
      <view v-if="showBack" class="navbar-left" @click="handleBack">
        <uni-icons type="arrow-left" size="18" color="#000"></uni-icons>
      </view>
      <view class="navbar-title" :style="{ opacity: titleOpacity }">
        <text class="title">{{ title }}</text>
      </view>
      <!-- <view class="navbar-right">
        <slot name="right"></slot>
      </view> -->
    </view>
  </view>
  <!-- 占位元素，防止内容被navbar遮挡 -->
  <view
    class="navbar-placeholder"
    :style="{ height: totalBarHeight + 'px' }"
  ></view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

// 定义组件属性
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: "人体生命科学馆",
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: false,
  },
  // 背景色
  backgroundColor: {
    type: String,
    default: "#FFFFFF",
  },
  // 背景图片
  backgroundImage: {
    type: String,
    default: "",
  },
  // 文本颜色
  textColor: {
    type: String,
    default: "#000000",
  },
  // 返回按钮颜色
  backIconColor: {
    type: String,
    default: "#000000",
  },
  // 标题透明度
  titleOpacity: {
    type: Number,
    default: 1,
  },
});

// 定义事件
const emit = defineEmits(["back"]);

// 状态栏高度
const statusBarHeight = ref(0);
// 导航栏高度
const navbarHeight = ref(44);
// 总高度
const totalBarHeight = computed(
  () => statusBarHeight.value + navbarHeight.value
);

// 导航栏样式
const navbarStyle = computed(() => {
  let style = {
    backgroundColor: props.backgroundColor,
  };

  if (props.backgroundImage) {
    style.backgroundImage = `url(${props.backgroundImage})`;
    style.backgroundSize = "cover";
    style.backgroundPosition = "center";
  }

  return style;
});

// 返回按钮处理
const handleBack = () => {
  emit("back");
  uni.navigateBack({
    delta: 1,
    fail() {
      // 如果返回失败，可能是首页，跳转到首页
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
  });
};

// 获取状态栏高度
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight;

  // 根据不同平台设置导航栏高度
  if (systemInfo.platform === "android") {
    navbarHeight.value = 48;
  } else if (systemInfo.platform === "ios") {
    navbarHeight.value = 44;
  }
});
</script>

<style lang="scss" scoped>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: $zindex-fixed;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 $spacer-3;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: $uni-font-size-lg;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  .title {
    max-width: 80%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.navbar-left {
  width: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

// .navbar-right {
//   width: 60rpx;
//   display: flex;
//   align-items: center;
//   justify-content: flex-end;
// }
</style>
